<!--
  Point Animation Demo Component

  This demo shows how to create animated point entities with varying sizes
  
  Category: Basic

  Component Documentation:
  ========================

  Title: Point Animation Demo
  Description: This demo shows how to create animated point entities with varying sizes
  Features:
    - TODO: List key features of this demo
  Author: CesiumJS Demo Project
  Date: 8/21/2025
-->

<template>
  <BaseCesiumViewer 
    ref="cesiumViewer" 
     
    @viewer-ready="onViewerReady"
  />
</template>

<script>
import { ref } from 'vue';
import BaseCesiumViewer from '../core/BaseCesiumViewer.vue';
import { createAnimatedPoint, setViewRectangle } from '../utils/cesiumUtils.js';

export default {
  name: 'PointAnimationDemo',
  components: {
    BaseCesiumViewer
  },
  setup() {
    const cesiumViewer = ref(null);

    // This function is called when the Cesium viewer is ready
    const onViewerReady = (payload) => {
      // Check if payload and viewer are valid
      if (!payload || !payload.viewer) {
        console.error('Viewer is not ready or payload is invalid');
        return;
      }
      
      const { viewer, Cesium } = payload;
      
      // 添加一些动画点
      const points = [
        { name: 'Point 1', lon: -75.1652, lat: 39.9526, color: Cesium.Color.RED },
        { name: 'Point 2', lon: -74.1652, lat: 40.9526, color: Cesium.Color.BLUE },
        { name: 'Point 3', lon: -73.1652, lat: 41.9526, color: Cesium.Color.GREEN },
        { name: 'Point 4', lon: -72.1652, lat: 42.9526, color: Cesium.Color.YELLOW }
      ];

      points.forEach((point, index) => {
        createAnimatedPoint(viewer, {
          name: point.name,
          lon: point.lon,
          lat: point.lat,
          color: point.color,
          sizeFunction: () => 8 + 4 * Math.sin(Date.now() / 1000 + index) // 修复参数名称
        });
      });

      // 将视图定位到点位置
      setViewRectangle(viewer, {
        west: -76.0,
        south: 39.0,
        east: -72.0,
        north: 43.0
      });
    };

    return {
      cesiumViewer,
      onViewerReady
    };
  }
};
</script>

<style scoped>
/* 组件样式 */
</style>